<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <!-- 左侧销售登记列表 -->
  <div class="left_box">
    <dv-border-box3>
      <div class="Registration">销售登记表</div>
      <div class="box">
        <el-table :data="tableData" class="table" ref="myTable" @mouseover.native="clearScroll" 
        @mouseleave.native="createScroll" 
        >
          <el-table-column prop="name" label="养殖场名称" width="170" />
          <el-table-column prop="address" label="地址" width="110" />
          <el-table-column prop="num" label="数量" width="70" />
        </el-table>
      </div>
    </dv-border-box3>
  </div>
</template>

<script lang="ts" setup>
import { reactive, onMounted, onUnmounted, ref } from "vue";

let timer: number | null | undefined = null
let myTable = ref(null)
 
const clearScroll = () => {
	clearInterval(timer)
	timer = null
}
const createScroll = () => {
	clearScroll()
	// 拿到 table
	const table = myTable.value.layout.table.refs
	// 拿到可以滚动的元素
	const tableWrapper = table.bodyWrapper.firstElementChild.firstElementChild
 
	timer = setInterval(() => {
		tableWrapper.scrollTop += 1
		// 判断是否滚动到底部，如果到底部了置为0（可视高度+距离顶部=整个高度）
		if (tableWrapper.clientHeight + tableWrapper.scrollTop == tableWrapper.scrollHeight) {
			tableWrapper.scrollTop = 0
		}
	}, 100)
}
 
onMounted(() => {
	createScroll()
})
onUnmounted(() => {
	clearScroll()
})


const tableData = [
  {
    name: "湖北省荆门市钟祥市沁",
    address: "湖北省荆门市",
    num: 1,
  },
  {
    name: "安徽省宿州市砀山县王",
    address: "安徽省宿州市",
    num: 1,
  },
  {
    name: "浙江省杭州市建德市永",
    address: "浙江省杭州市",
    num: 1,
  },
  {
    name: "浙江省杭州市建德市飞",
    address: "浙江省杭州市",
    num: 1,
  },
  {
    name: "浙江省杭州市建德市三",
    address: "浙江省杭州市",
    num: 2,
  },
  {
    name: "河南省周口市商水县张",
    address: "河南省周口市",
    num: 2,
  },
  {
    name: "内蒙古乌兰察布市察右",
    address: "内蒙古自治区",
    num: 3,
  },
  {
    name: "内蒙古自治区呼和浩特",
    address: "内蒙古自治区",
    num: 1,
  },
  {
    name: "内蒙古自治区鄂尔多斯",
    address: "内蒙古自治区",
    num: 2,
  },
  {
    name: "宁夏石嘴山市大武口王",
    address: "宁夏回族自治区",
    num: 1,
  },
  {
    name: "湖北省荆门市钟祥市沁",
    address: "湖北省荆门市",
    num: 1,
  },
  {
    name: "安徽省宿州市砀山县王",
    address: "安徽省宿州市",
    num: 1,
  },
  {
    name: "浙江省杭州市建德市永",
    address: "浙江省杭州市",
    num: 1,
  },
  {
    name: "浙江省杭州市建德市飞",
    address: "浙江省杭州市",
    num: 1,
  },
  {
    name: "浙江省杭州市建德市三",
    address: "浙江省杭州市",
    num: 2,
  },
  {
    name: "河南省周口市商水县张",
    address: "河南省周口市",
    num: 2,
  },
  {
    name: "内蒙古乌兰察布市察右",
    address: "内蒙古自治区",
    num: 3,
  },
  {
    name: "内蒙古自治区呼和浩特",
    address: "内蒙古自治区",
    num: 1,
  },
  {
    name: "内蒙古自治区鄂尔多斯",
    address: "内蒙古自治区",
    num: 2,
  },
  {
    name: "宁夏石嘴山市大武口王",
    address: "宁夏回族自治区",
    num: 1,
  },
];
</script>

<style lang="less" scoped>
.left_box {
  width: 23vw;
  height: 85vh;
  margin-top: 2vh;
  margin-left: 2vw;
}

.Registration {
  width: 15vw;
  height: 6vh;
  margin-left: 4vw;
  text-align: center;
  line-height: 12vh;
  font-size: 24px;
  font-weight: bold;
  color: #00ffff;
}

.box {
  width: 100%;
  height: 70vh;
}

.box .table {
  width: 80%;
  height: 60vh;
  margin-left: 2.3vw;
  margin-top: 5vh;
  text-align: center;
  border-collapse: collapse;
  font-size: 14px;
  border: none;
  background: none;
}

::v-deep {
  .el-table td.el-table__cell {
    background: linear-gradient(to bottom,#00183e,#002d5b);
    color: #fff !important;
    border-bottom: 1px solid rgba(255,255,255,0.1) !important;
    height: 50px;
  }
  .el-table th.el-table__cell {
    font-size: 18px;
    height: 5.8vh;
  }
  .el-table th.el-table__cell.is-leaf {
    background: #00ffff;
    color: #00183e;
  }
  
}

</style>
